<template>
  <!-- 引入container布局 -->
    <el-container class="home-container">
        <!-- 头部 -->
  <el-header> 
      <div>
          <img src="../assets/logo.png" alt/>
          <span>电商管理平台</span>
      </div>
        <el-menu
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
        <el-menu-item index="1" @click="personal">
            <svg class="icon" aria-hidden="true"> 
            <use xlink:href="#icon-gerenxinxi"></use>
            </svg>
            个人信息</el-menu-item>
        <el-menu-item index="2" @click="shop">
            <svg class="icon" aria-hidden="true"> 
            <use xlink:href="#icon-dianpu"></use>
            </svg>
            店铺信息</el-menu-item>
        <el-menu-item index="3" @click="follow">
            <svg class="icon" aria-hidden="true"> 
            <use xlink:href="#icon-wodeguanzhu"></use>
            </svg>
            关注用户情况</el-menu-item>
        </el-menu>
        <el-button type="info" @click="logout" >安全退出</el-button>
    </el-header>
     <!-- 侧边栏 -->
    <el-container>
    <el-aside width="190px">
        <el-row class="tac" style="height: 100%">
        <el-col style="height: 100%">
        <el-menu
            
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
            style="height: 100%"    >
            <el-menu-item index="1" @click="home">
                <svg class="icon" aria-hidden="true"> 
                <use xlink:href="#icon-shouye_huaban1"></use>
                </svg>
                <span slot="title" >首页</span>
            </el-menu-item>
            <el-menu-item index="2" @click="order">
                <svg class="icon" aria-hidden="true"> 
                <use xlink:href="#icon-dingdan"></use>
                </svg>
                <span slot="title" >订单处理中心</span>
            </el-menu-item>
             <el-menu-item index="3" @click="shopManage">
                <svg class="icon" aria-hidden="true"> 
                <use xlink:href="#icon-shangpin1"></use>
                </svg>
                <span slot="title" >商品管理</span>
            </el-menu-item>
            </el-menu>
        </el-col>
        </el-row> 
        </el-aside>
        <!-- Main区域 -->
      <el-container>
      <el-main width="-100px">
          <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">电商管理平台</el-breadcrumb-item>
          <el-breadcrumb-item><a href="/">关注用户情况</a></el-breadcrumb-item>
          </el-breadcrumb>
          <template>
        </template>

      </el-main>
      </el-container>

  </el-container>
</el-container>
</template>
<script>
export default{
     data() {
      return {
        activeIndex: '1',
        activeIndex2: '1',
      }
    },
    methods:{
        // 安全退出
        logout(){
            window.sessionStorage.clear();  //清楚session
            this.$router.push("/login");    //回到首页
        },
        handleSelect(key, keyPath) {
        console.log(key, keyPath);      // 顶部栏
      },
       handleOpen(key, keyPath) {     // 侧边栏
        console.log(key, keyPath);
      },
       handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      // 页面跳转
      personal(){
          this.$router.push('/personal')
      },
      shop(){
          this.$router.push('/shop')
      },
      follow(){
          this.$router.push('/follow')
      },
      home(){
          this.$router.push('/home')
      },
      order(){
          this.$router.push('/order')
      },
      shopManage(){
          this.$router.push('/shopManage')
      },
    },
};
</script>
<style lang = 'less' scoped>
// 布局器样式
.home-container{
    height: 100%;
}
// 头样式
.el-header {
    background-color: #545c64;
    display: flex;
    /* justify-content: space-between;  // 左右贴边 */
    padding-left: 0%;   // 左边界
    align-items: center;
    color:#fff;
    font-size: 20px;
    div{
        display: flex;
        align-items: center;
        span{
            margin-left: 15px;
        }
    }   
}
.el-button{
    position: absolute;
    right:10px;
}
// 主体样式
.el-main {
    background-color: #eaedf1;
}
img{
    width: 55px;
    height: 55px;
}
// 侧边栏
.el-menu{
    height: 100%;
    overflow-y: auto !important;
    text-align: left;
}
// 主界面
.el-main {
    background-color: #E9EEF3;
    color: #333;
    line-height: 160px;
  }
</style>